@charset "utf-8";


/* 일정 선택 */
.route-plan-navi {position:relative; height:37px; border-bottom:1px solid #e9e9e9; background:url(/image/common/bg_slant.png);}
.route-plan-navi .b-line {position:absolute; bottom:0; left:0; right:0; height:1px; background:#fff;}
.route-plan-navi .title {float:left; margin:11px 0 0 13px; font:bold 12px/16px calibri; color:#24364a;}
.route-plan-navi .control {position:absolute; left:42px; right:6px; top:6px; height:24px; overflow:hidden;}
.route-plan-navi .control .nums {float:left; border-bottom:2px solid #e0e0e0; height:12px; zoom:1;}
.route-plan-navi .control a {float:left; margin-right:30px; width:24px; height:24px; display:block; font:bold 11px/24px calibri; color:#24364a; text-align:center; background:url(/image/route/map_day_navi.png) no-repeat;}
.route-plan-navi .control a.off {color:#b8b8b8; background-position:-60px 0;}
.route-plan-navi .control a:hover {color:#fff !important; text-decoration:none; background-position:-30px 0;}
.route-plan-navi.view .control a.off:hover {color:#b8b8b8 !important; background-position:-60px 0; cursor:default;}
.route-plan-navi .control a.on {color:#fff; background-position:-30px 0;}
.route-plan-navi .control a.last {margin-right:0;}
.route-plan-navi .control a.page-hidden {visibility:hidden;}
.route-plan-navi .control a.btn-arrow {float:none; position:absolute; margin-right:0; cursor:pointer; background-position:-90px 0;}
.route-plan-navi .control a.btn-arrow:hover {background-position:-30px 0;}
.route-plan-navi .control a.btn-arrow span {position:absolute; top:6px; left:9px; text-indent:-100px; overflow:hidden; width:7px; height:11px; background:url(/image/common/map_arrow.png) no-repeat;}
.route-plan-navi .control a.btn-prev {left:0;}
.route-plan-navi .control a.btn-prev span {background-position:-10px 0;}
.route-plan-navi .control a.btn-prev:hover span {background-position:0 0;}
.route-plan-navi .control a.btn-next {right:0;}
.route-plan-navi .control a.btn-next span {background-position:-40px 0;}
.route-plan-navi .control a.btn-next:hover span {background-position:-30px 0;}

/* 간단경로 - 나라, 도시 수 */
.route-total-cnt {height:27px; padding-top:5px; border-bottom:1px solid #fff; font-size:14px; color:#24364a; text-align:center; font-weight:bold; background:url(/image/common/bg_slant.png);}
.route-total-cnt em {color:#ff4f47;}

/* 일정표 - 상단 일차 정보 */
.route-plan .plan-info {position:relative; padding:18px 0 8px; min-height:16px; border-bottom:1px solid #ccc; overflow:hidden;}
.route-plan .plan-info .day-info {position:absolute; top:50%; margin-top:-13px;}
.route-plan .plan-info h3 {float:left; font-size:18px; color:#24364a; font-weight:bold;}
.route-plan .plan-info .date {float:left; margin:10px 0 0 7px; font:12px/16px calibri; color:#999;}
.route-plan .plan-info .cities {float:right; max-width:205px; font-size:11px;}
.route-plan .plan-info .cities a {color:#666;}
.route-plan .day-note {position:relative; border:1px solid #eae4ce; border-left:0; padding:11px 13px 13px 14px; background:#fdfdf1 url(/image/route/bg_day_note.png) repeat-y; zoom:1;}
.route-plan .day-note h3 {margin-bottom:5px; font:bold 12px arial; color:#666;}
.route-plan .day-note .note .view {padding:4px 6px; color:#666;}

/* 일정표 - 유닛 공통 */
.route-plan .unit-list {background:#fff; position:relative; margin-top:11px; background:url(/image/route/bg_move_dotted.png) 10px 0 repeat-y; zoom:1;}
.route-plan .unit-list li {position:relative; zoom:1; vertical-align:top;}
.route-plan li .line-prev {position:absolute; top:0; left:10px; height:20px; width:3px; background:#ccc;}
.route-plan li .marker {position:absolute; top:9px; left:1px; width:22px; height:21px; text-align:center; padding-top:4px; color:#fff; font:bold 11px calibri; background:url(/image/maps/bg_mark_spot.png) no-repeat;}
.route-plan li .line-next {position:absolute; top:20px; bottom:-1px; left:10px; width:3px; background:#ccc;}
.route-plan li .unit-body {position:relative; margin-left:28px; min-height:43px; border-bottom:1px solid #e0e0e0; vertical-align:top; zoom:1;}
.route-plan li .unit-body.hover {background:#f7f7f7;}
.route-plan li.prev-move .line-prev,
.route-plan li.next-move .line-next {background:#02b0ed;}
.route-plan li.prev-error .line-prev, 
.route-plan li.next-error .line-next {background:none !important;}
.route-plan li.first.top .line-prev, 
.route-plan li.last.bottom .line-next {background:#fff !important;}
.route-plan li.move.first .line-prev,
.route-plan li.move.last .line-next {background:none !important;}

/* 일정표 - 유닛 (스팟) */
.route-plan li.spot.city .marker {background-image:url(/image/maps/bg_mark_city.png);}
.route-plan li.spot .name {font-size:14px; color:#666; padding:9px 0 10px;}
.route-plan li.spot .name .icon {vertical-align:middle; margin-right:5px;}
.route-plan li.spot .name a {font-size:16px; padding-left:2px;  color:#000; font-weight:bold;}
.route-plan .spot-info {padding-bottom:20px;}
.route-plan .spot-info .intro {height:28px; font-size:11px; line-height:15px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.route-plan .spot-info .thumb {float:left; width:105px; height:105px;}
.route-plan .spot-info dl {float:left; margin-left:20px; font-size:11px; line-height:18px; color:#666;}
.route-plan .spot-info dt {font-weight:bold; float:left;}
.route-plan .spot-info dd {margin-left:70px;}

/* 일정표 - 유닛 (이동) */
.route-plan li.move .unit-body {line-height:18px; padding-left:2px; font-size:11px;}
.route-plan li.move .info {font-size:11px; color:#666;}
.route-plan li.move .info .bar {color:#ccc; margin:0 4px;}
.route-plan li.move .name {padding-top:13px;}
.route-plan li.move .name em {font-size:12px; font-weight:bold; color:#000;}
.route-plan li.move .note {padding-bottom:12px; color:#999;}
.route-plan li.move .marker {background:none; padding:0; height:23px; width:23px; left:0; top:10px;}
.route-plan li.move .line-prev,
.route-plan li.move .line-next {background:#02b0ed;}

/* 일정표 - 유닛 메모 */
.route-plan li .my-info {position:relative; border:1px solid #d6d6d6; border-bottom:0; padding:10px 14px 12px; color:#666; font-size:11px; background:#fdfdf1; zoom:1;}
.route-plan li .my-info .edge {position:absolute; right:-1px; bottom:-1px; width:10px; height:12px; background:url(/image/route/bg_unit_memo.png) no-repeat;}
.route-plan li .my-info .charge {height:40px; line-height:20px; overflow:hidden;}
.route-plan li .my-info .charge.empty-note {height:20px;}
.route-plan li .my-info .charge .title {float:left; font-weight:bold;}
.route-plan li .my-info .charge input {float:left; margin-left:10px; padding:0 3px; border:1px solid #c1c1c1; width:79px; height:18px; color:#666; font-size:11px; vertical-align:middle;}
.route-plan li .my-info .charge select {float:left; margin:1px 0 0 6px; height:18px; width:149px; border:1px solid #bababa; font-size:11px; vertical-align:middle;}
.route-plan li .my-info .charge .charge-won {display:block; clear:left; padding-left:56px;}
.route-plan li .my-info .charge .view {float:left; margin-left:16px;}
.route-plan li .my-info .my-btns {position:absolute; top:12px; right:14px; color:#d0d0d0;}
.route-plan li .my-info .my-btns a {color:#03a2d0;}
.route-plan li .my-info .memo .title {font-family:arial; padding:3px 0 4px; font-weight:bold;}
.route-plan li .my-info .memo textarea {padding:5px; width:360px; height:44px; border:1px solid #ccc; font-size:11px;}
.route-plan li .my-info .memo .view {line-height:18px; padding:0 1px;}

/* 상세 - 공통 */
.w-detail .title-tag {position:absolute; top:13px; left:-74px; width:74px; height:40px; text-indent:-1000px; overflow:hidden; background:url(/image/route/map_title_tag.png) no-repeat;}
.w-detail .title-tag.detail {background-position:-80px 0;}
.w-detail .title-tag.story {background-position:-160px 0;}
.w-detail .title-tag.member {background-position:-240px 0;}

/* 상세 - 제목 */
.w-detail .header {padding-top:20px;}
.w-detail .header .m-box-inner {padding:10px 14px 10px 77px; height:50px;}
.w-detail .header .thumb {position:absolute; top:10px; left:14px; width:50px; height:50px;}
.w-detail .header .title {height:33px;}
.w-detail .header h2 {float:left; font-size:24px; line-height:27px;} 
.w-detail .header .member {float:left; margin:6px 0 0 10px; color:#999;} 
.w-detail .header .member a {color:#666;} 
.w-detail .header .private {float:left; margin:8px 0 0 13px;} 
.w-detail .header .control {float:left; margin:2px 0 0 13px; } 
.w-detail .header .control a {float:left; width:24px; height:23px; text-indent:-100px; overflow:hidden; background:url(/image/common/map_btn_edit.png) no-repeat;} 
.w-detail .header .control a.btn-del {background-position:-24px 0; width:23px;}
.w-detail .header .control a.btn-edit:hover {background-position:0 -25px;}
.w-detail .header .control a.btn-del:hover {background-position:-24px -25px;}
.w-detail .header .period {clear:left; float:left; color:#999; font-size:14px; line-height:17px; font-weight:bold;}
.w-detail .header .date {float:left; margin:2px 0 0 5px; font:12px/14px calibri; color:#999;}
.w-detail .header .visited {float:left; margin:3px 0 0 6px; width:35px; height:13px; text-align:center; color:#fff; font:bold 11px/13px calibri;}
.w-detail .header .visited.went {background-color:#8fc7e9;}
.w-detail .header .visited.want {background-color:#eea495;}
.w-detail .header .state {position:absolute; top:31px; right:0;}
.w-detail .header .state a {float:left; width:27px; height:27px; overflow:hidden; text-indent:-100px; background:url(/image/common/map_btn_state2.png) no-repeat;}
.w-detail .header .state a.btn-like:hover,
.w-detail .header .state a.btn-like.on {background-position:0 -30px;}
.w-detail .header .state a.btn-like.on {cursor:default;}
.w-detail .header .state a.btn-comment {background-position:-30px 0;}
.w-detail .header .state a.btn-comment:hover, 
.w-detail .header .state a.btn-comment.on {background-position:-30px -30px;}
.w-detail .header .state a.btn-retravel {background-position:-60px 0;}
.w-detail .header .state a.btn-retravel:hover,
.w-detail .header .state a.btn-retravel.on {background-position:-60px -30px;}
.w-detail .header .state span {float:left; margin:6px 24px 0 6px; font:15px/15px calibri; color:#999;}

/* 상세 - 상단 일정표 영역 */
.w-detail .schedule {position:relative; margin-top:14px;}
.w-detail .schedule .m-box-inner {padding:14px; overflow:hidden; position:relative;}
.w-detail .schedule .bottom-mask {position:absolute; width:100%; bottom:0; left:0; height:14px; background:#fff; visibility:hidden;}
.w-detail .schedule .plan-mask {position:absolute; top:-60px; right:14px; width:450px; height:60px; background:url(/image/route/bg_plan_bottom.png) repeat-x;}
.w-detail .schedule .btn-toggle {position:absolute; width:59px; height:22px; right:14px; bottom:0; text-indent:-1000px; overflow:hidden; z-index:12; background:url(/image/common/map_btn_toggle.png) no-repeat;}
.w-detail .schedule .btn-toggle:hover {text-decoration:none;}
.w-detail .schedule .m-box-inner.compact {height:448px;}
.w-detail .schedule .m-box-inner.compact .bottom-mask {visibility:visible;}
.w-detail .schedule .m-box-inner.compact .btn-toggle {background-position:0 -22px;}
.w-detail .map-area {float:left; width:475px; }
.w-detail .map-area-inner {border:1px solid #e3e3e3;}
.w-detail .map-area .map {height:407px;}
.w-detail .map-area .info {border-top:1px solid #e3e3e3; padding:10px 11px; background:#fafafa; font-size:11px; line-height:18px;}
.w-detail .map-area .info em {color:#000; font-weight:bold;}
.w-detail .map-area .info .title {margin-right:5px;}
.w-detail .map-area .info a {color:#666;}
.w-detail .map-area .total {height:18px; color:#666; font-size:12px;}
.w-detail .map-area .total li {float:left; padding-left:10px; margin:0 20px 0 2px; line-height:18px; background:url(/image/common/bu_dot_gray.png) 0 7px no-repeat;}
.w-detail .map-area .theme * {vertical-align:middle;}
.w-detail .map-area .theme span {margin-right:18px;}
.w-detail .map-area .register {margin-top:7px;}
.w-detail .map-area .register .from {float:left;}
.w-detail .map-area .register .from span {font:12px/12px calibri; color:#999;}
.w-detail .map-area .register .from a {color:#03a2d0; font-size:11px;}
.w-detail .map-area .register .update {float:right; font-family:calibri; color:#999;}
.w-detail .plan-area {float:right; width:450px;}

/* 상세 - 스토리 */ 
.w-detail .story-area {margin-top:14px; position:relative;}
.w-detail .story-area .m-box-inner {padding:30px; min-height:100px;}
.w-detail .story-area .content {word-break:break-all; word-wrap:break-word; overflow:hidden;}

